<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
    <title>直播间</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="http://47.89.10.155:65533/static/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/front.css">
    <link rel="stylesheet" href="/static/emoji/dist/css/jquery.emoji.css">
	<script type="text/javascript" src="/static/layui/layui.js"></script> 
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/swfobject.js"></script>
	<script type="text/javascript" src="/static/js/web_socket.js"></script>
	<script src="/static/emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
	<script src="/static/emoji/src/js/jquery.emoji.js"></script>
</head>
<script>
	WEB_SOCKET_SWF_LOCATION = "/static/swf/WebSocketMain.swf";
    var
        ws,
        token     = '{$room_data.token}',
        user_name = '{$room_data.user_name}',
        user_id   = '{$room_data.user_id}',
        room_id   = '{$room_data.room_id}',
        room_lock = {empty name="$room_data.password"}0{else /}1{/empty};

    var layer = layui.layer;

</script>
<body onload="ini_set();" style="background:url(/static/images/base_bck.jpg) repeat 0 0 #2c2b2b; background-size: 100%;">
	<div class='top-container'>
		<img src="/static/images/logo.png" class='logo'>
		<div class='saveToDesk' onclick="toDesktop()">保存到桌面</div>
		<div class='phoneToView'>手机看直播</div>
		<div style="display: none" id="phoneToViewCode">
			<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://www.zhenhaoming.com?room_id=10001"/>
		</div>
		<div class='account'>
			{if condition="$room_data.user_role eq 1"}
            <img class="account-head" src="{$room_data.avatar}"/>
            <span>&nbsp;&nbsp;<a href="javascript:void(0)">{$room_data.user_name}</a></span>
            <a href="javascript:void(0)" class="login">登录&nbsp;/</a>
            <a href="javascript:void(0)" class="register">注册</a>
            {else /}
			<img class="account-head" src="{$room_data.avatar}"/>
            <span>&nbsp;&nbsp;<a href="javascript:void(0)" class="user_info">{$room_data.user_name}</a></span>
            <a href="/account/logout" >&nbsp;&nbsp;退出登录</a>
            {/if}
        </div>
	</div>
	<div class='side-left-container'>
		<ul class='side-left-nav'>
			{volist name="article_cate" id="v" key="k"}
			<li>
				<a href="javascript:void(0)" menu_url="/article" menu_id="{$v.id}" menu_name="{$v.name}" class="left-menu-url">
                <img src="/static/images/left_icon_0{$k}.png">
                <span>{$v.name}</span>
                </a>
            </li>
            {/volist}
            <li>
				<a href="javascript:void(0)" menu_url="/teacher" menu_id="4" menu_name="讲师列表" class="left-menu-url">
                <img src="/static/images/left_icon_03.png">
                <span>讲师列表</span>
                </a>
            </li>
        </ul>
		<div class='side-left-nav2'>
			<div class='user-msg'>
				<img class='user-msg-img' src="{$room_data.avatar}" alt="">
				<div class='user-msg-div'>
					<p class="user-name">{$room_data.user_name}</p>
					<img class="user-pic" src='{$room_data.role_icon}'>			
				</div>
			</div>
			<ul class='user-nav'>
				<li id="user-nav1" class='user-nav-selected'>
					<p>在线会员</p>
					<p id="online-count">(0)</p>
				</li>
				<li id="user-nav2">
					<p>我的客服</p>
					<p id="server-count">(0)</p>
				</li>
			</ul>
			<ul class='user-content' id='user-nav1-content'>
				<!-- 在线用户列表 -->

			</ul>
			<ul class='user-content' id='user-nav2-content' style='display: none;'>
				<li>
					<img class='user-content-img' src="/static/images/qq_server.png" alt="">
					<div class='user-content-div'>
						<p class="user-content-name">客服2</p>
						<img class="user-content-pic" src='/static/images/kefu.png'>
						<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=14234234&amp;site=qq&amp;menu=yes" class="qq-chat" target="_blank">
							<div class="QQ">QQ交谈</div>
						</a>
					</div>
				</li>
				<li>
					<img class='user-content-img' src="/static/images/qq_server.png" alt="">
					<div class='user-content-div'>
						<p class="user-content-name">客服1</p>
						<img class="user-content-pic" src='/static/images/kefu.png'>
						<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=297912214&amp;site=qq&amp;menu=yes" class="qq-chat" target="_blank">
							<div class="QQ">QQ交谈</div>
						</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class='center-container'>
		<div class='center-nav'>
			<img class='center-nav-img' src="{$room_data.teacher_avatar}" style="border-radius: 100%">
			<span class='center-nav-class'>直播间</span>
			<span class='center-nav-teacher'>主讲：{$room_data.teacher_name}</span>
			<div class='popularity'><img src="/static/images/popularity.png" >
				<span id="top-online-count">0</span>
			</div>
			{if condition="in_array($room_data.user_role, explode(',', $room_data.power_role))"}
			<select id="live_teacher" class='center-select'>
				<option value="/static/images/tourist.png">暂无直播</option>
				{volist name="teacher" id="k"}
					<option value="{$k.avatar}" {if condition="$room_data.teacher_name eq $k.name"}selected="selected"{/if}>{$k.name}</option>
				{/volist}
			</select>
			<button class="layui-btn layui-btn-sm layui-btn-danger" id="change_live_info">切换</button>
			{/if}
			<a class="btn btn-broadcast" href="javascript:void(0);"><div class='refresh'>刷新</div></a>
			<div class='share' onclick="copyUrl()">分享</div>
		</div>
		<!-- 视频播放窗口 -->
		<div class='center-content'>
			<embed 
    		src="http://yy.com/s/27586551/27586551//yyscene.swf" 
    		quality="high" width="100%" height="680px" align="middle" allowscriptaccess="always" 
    		allowfullscreen="true" wmode="transparent" type="application/x-shockwave-flash" 
    		autostart="true">		</div>
		<!--签到-->
		<!-- <div class="center-signin"><img src="/static/images/signin.png"></div> -->
		<!-- 轮播图 -->
		<div class="layui-carousel" id="banner">
		  <div carousel-item>
			    <div><a href="javascript:void(0)" target="_blank"><img src="/static/images/default_banner.jpg" style="width: 100%;height: 400px"></a></div>
		    	<div><a href="javascript:void(0)" target="_blank"><img src="/static/images/default_banner.jpg" style="width: 100%;height: 400px"></a></div>
		  </div>
		</div>
	</div>
	<div class='side-right-container'>
		<div class='right-nav'>消息列表</div>
		<div class='right-welcome'>
		<marquee scrollamount="5">
            <span class="scroll-notice">{$room_data.notice}</span>
        </marquee>
		</div>
		<div class='right-msg'>
			<a href="javascript:void(0)" class="get_more_msg" data-page="0"><p>查看更多消息</p></a>
			<div class='clear'>清屏</div>
			<div class='scroll'>滚动</div>
			<!-- 消息列表 -->
			<ul class='right-msg-meet'>

			</ul>
		</div>
		<div class='tool-bar'>
			<img class='face' src="/static/images/face.png">
			<img class='colorbar' src="/static/images/colorbar.png">
			<div class="colorbar_list">
				<dl>
				   <a href="javascript:void(0)" onclick="sendColorbar(1)"><dt>赞一个</dt></a>
				   <a href="javascript:void(0)" onclick="sendColorbar(2)"><dt>顶一个</dt></a>
				   <a href="javascript:void(0)" onclick="sendColorbar(3)"><dt>鲜花</dt></a>
				   <a href="javascript:void(0)" onclick="sendColorbar(4)"><dt>掌声</dt></a>
				</dl>
			</div>
			对<div class='dj' class="to_client">大家</div>说
			{if condition="in_array($room_data.user_role, explode(',', $room_data.power_role))"}
			<img id="btnImage" src="/static/images/img.png">
			<span>类型:
				<select id="speak_role">
					<option value="1" selected="selected">游客</option>
					<option value="2">会员</option>
				</select>
			</span>
			<span>间隔:</span>
				<select id="speak_time">
					<option value="5000">5秒</option>
					<option value="15000">15秒</option>
					<option value="30000">30秒</option>
					<option value="45000">45秒</option>
				</select>
			<span>
			<span><button class="layui-btn layui-btn-xs layui-btn-danger start_auto_speak">开启自动发言</button></span>
			<span><button class="layui-btn layui-btn-xs layui-btn-danger stop_auto_speak">关闭</button></span>
			{/if}
			<input type="hidden" name="to_client" value="all"   id="to_client"> 
            <input type="hidden" name="to_name"   value="大家"  id="to_name">
            <input type="hidden" name="room_id"   value="10001" id="room_id">
            <input type="hidden" value="0" id="base_online">
        </div>
		<div class='bom-bar' type="text" id="message_content" contenteditable="true"></div>
		<button class='send' onclick="sendMessage()">
			发送
		</button>
	</div>
</body>
<script type="text/javascript" src="/static/js/common.js"></script>
{if condition="in_array($room_data.user_role, explode(',', $room_data.power_role))"}
<script type="text/javascript" src="/static/js/power.js"></script>
{else /}
<script type="text/javascript" src="/static/js/function.js"></script>
{/if}
</html>